<template>
	<view>
		<my-search-input @confirm ="goSearch"  @kwlist-change="kwListHandler" @check-advice="checkAd" bgcolor="#D81E07" ></my-search-input>
		<my-search-history  :kwList="kwList" @kwlist-select="kwListSelect" @clear-history="clearKwList" v-show="isHistoryShow"></my-search-history>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAdExist:false,
				kwList:[]
			};
		},
		onLoad() {
			this.initKwList();
		},
		computed: {
			isHistoryShow() {
				return  !this.isAdExist && this.kwList.length != 0;
			}
		},
		methods:{
			goSearch(value){
				uni.navigateTo({
					url:"/subpkg/goods_list/goods_list?keyword="+value
				})
			},
			checkAd(length){
				this.isAdExist = length == 0 ? false : true;
			},
			kwListHandler(searchValue){
				this.kwList.unshift(searchValue);
				this.kwList = [...new Set(this.kwList)];
			},
			kwListSelect(searchValue){
				this.kwListHandler(searchValue);
			},
			initKwList(){
				let kwList = uni.getStorageSync('kwList');
				this.kwList = (kwList && JSON.parse(kwList)) || [];
			},
			saveKwList(){
				uni.setStorageSync("kwList",JSON.stringify(this.kwList));
				console.log(JSON.stringify(this.kwList), "save is ok!");
			},
			clearKwList(){
				this.kwList = [];
			}
		},
		watch: {
			kwList(newValue, oldValue) {
				this.saveKwList();
			}
		},
	}
</script>

<style lang="scss" scoped>
	
</style>
